<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JSX</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <!-- 使用 jsx 引入babel是必需的 -->
    <script src="./js/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <!-- 设置 script 标签的 type 属性 -->
    <script type="text/babel">
      // 创建虚拟 DOM 对象
      // let h2 = <h2 title="就这么加属性">就是真么的神奇</h2>;//这个标签不叫『html标签』,叫『jsx』
      let vdom = <div>
          <h2>秦霄贤被曝和孟子义谈恋爱，那哈妮克孜算什么？</h2>
          <p>内娱最快的“打脸”出现了。GQ盛典上，坐在中间举牌的秦霄贤，被感慨是“天选坐船人”，因为他旁边是陈都灵、毛晓彤等几位公认的大美女，网友辣评：也就单身汉才有这样的待遇了。</p>
          <a href="https://new.qq.com/rain/a/20231209A085Z000">查看更多</a>
        </div>;

      //渲染
      ReactDOM.render(vdom, document.querySelector('#root'));


    </script>
  </body>
</html>
